<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Circle</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#722ED1',
                        success: '#00B42A',
                        danger: '#F53F3F',
                        warning: '#FF7D00',
                        info: '#86909C',
                        light: '#F2F3F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 1px 3px rgba(0,0,0,0.1)',
                    },
                    spacing: {
                        'card': '1rem',
                    }
                }
            }
        }
    </script>
    
    <style>
        /* 自定义工具类的替代实现 */
        .content-auto {
            content-visibility: auto;
        }
        
        /* 为卡片添加动画效果 */
        .animate-fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center gap-2">
                <i class="fa fa-comments text-primary text-xl"></i>
                <h1 class="text-lg font-bold">SocialApp</h1>
            </div>
            
            <div class="flex items-center gap-3">
                <div class="hidden md:block relative">
                    <input type="text" placeholder="搜索..." class="py-1.5 px-3 pl-8 rounded-full border border-gray-200 text-sm">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
                </div>
                
                <div class="relative">
                    <button class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-bell text-sm"></i>
                    </button>
                    <span class="absolute top-0 right-0 w-3 h-3 bg-danger rounded-full"></span>
                </div>
                
                <img src="${user.avatar}" alt="User Avatar" class="w-8 h-8 rounded-full object-cover">
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 py-5">
        <!-- 用户信息 -->
        <div class="bg-white rounded-lg shadow-card p-4 mb-5 animate-fade-in">
            <div class="flex items-center gap-3">
                <img src="${user.avatar}" alt="Your Avatar" class="w-12 h-12 rounded-full object-cover">
                <div>
                    <h2 class="font-bold">${user.nickname}</h2>
                    <p class="text-sm text-info">加入于 ${user.birthdate}</p>
                </div>
            </div>
            
            <div class="mt-4 grid grid-cols-3 text-center">
                <div>
                    <p class="font-bold">${friendCount}</p>
                    <p class="text-xs text-info">好友</p>
                </div>
                <div>
                    <p class="font-bold">${postCount}</p>
                    <p class="text-xs text-info">动态</p>
                </div>
                <div>
                    <p class="font-bold">${likeCount}</p>
                    <p class="text-xs text-info">获赞</p>
                </div>
            </div>
        </div>
        
        <!-- 发布新动态 -->
        <div class="bg-white rounded-lg shadow-card p-4 mb-5 animate-fade-in" style="animation-delay: 0.1s">
            <textarea placeholder="分享你的新鲜事..." class="w-full p-3 rounded-lg border border-gray-200 focus:outline-none focus:border-primary resize-none min-h-[100px] text-sm"></textarea>
            
            <div class="flex flex-wrap items-center justify-between gap-2 mt-3">
                <div class="flex gap-2">
                    <button class="px-3 py-1.5 rounded text-sm text-info hover:bg-light transition-colors">
                        <i class="fa fa-image"></i>
                    </button>
                    <button class="px-3 py-1.5 rounded text-sm text-info hover:bg-light transition-colors">
                        <i class="fa fa-video-camera"></i>
                    </button>
                    <button class="px-3 py-1.5 rounded text-sm text-info hover:bg-light transition-colors">
                        <i class="fa fa-map-marker"></i>
                    </button>
                </div>
                
                <button class="bg-primary hover:bg-primary/90 text-white px-4 py-1.5 rounded-lg text-sm font-medium transition-colors">
                    发布
                </button>
            </div>
        </div>
        
        <!-- 动态内容 -->
        <div class="space-y-4">
            <!-- 动态选项卡 -->
            <div class="flex border-b">
                <button class="flex-1 py-2 font-medium text-primary border-b-2 border-primary text-sm">
                    全部动态
                </button>
                <button class="flex-1 py-2 font-medium text-info hover:text-primary transition-colors text-sm">
                    好友动态
                </button>
                <button class="flex-1 py-2 font-medium text-info hover:text-primary transition-colors text-sm">
                    我的动态
                </button>
            </div>
            
            <!-- 公共动态 -->
            <c:forEach items="${publicLogs}" var="log" varStatus="status">
                <div class="bg-white rounded-lg shadow-card p-4 mb-4 animate-fade-in" style="animation-delay: ${status.index * 0.1}s">
                    <div class="flex items-center gap-3">
                        <img src="${log.user.avatar}" alt="${log.user.nickname}" class="w-10 h-10 rounded-full object-cover">
                        <div>
                            <h3 class="font-medium text-sm">${log.user.nickname}</h3>
                            <p class="text-xs text-info">${log.publishTime} · ${log.location}</p>
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <p class="text-sm">${log.content}</p>
                        
                        <c:if test="${not empty log.attachment}">
                            <div class="mt-2 rounded-lg overflow-hidden">
                                <img src="${log.attachment}" alt="Post Image" class="w-full h-auto object-cover">
                            </div>
                        </c:if>
                        
                        <c:if test="${not empty log.link}">
                            <div class="mt-2 bg-light rounded-lg p-2 flex items-center gap-2">
                                <i class="fa fa-link text-primary"></i>
                                <p class="text-xs text-info truncate">${log.link}</p>
                            </div>
                        </c:if>
                    </div>
                    
                    <div class="mt-3 flex items-center justify-between text-xs text-info">
                        <span class="flex items-center gap-1">
                            <i class="fa fa-eye"></i> ${log.views}
                        </span>
                        <span class="flex items-center gap-1">
                            <i class="fa fa-globe"></i> ${log.scope}
                        </span>
                    </div>
                    
                    <div class="mt-3 border-t border-gray-100 pt-3 flex justify-between">
                        <button class="px-3 py-1.5 rounded text-sm text-info hover:text-primary transition-colors">
                            <i class="fa fa-thumbs-up"></i> ${log.likes}
                        </button>
                        <button class="px-3 py-1.5 rounded text-sm text-info hover:text-primary transition-colors">
                            <i class="fa fa-thumbs-down"></i> ${log.dislikes}
                        </button>
                        <a href="commentLog.jsp?logId=${log.id}" class="px-3 py-1.5 rounded text-sm text-info hover:text-primary transition-colors">
                            <i class="fa fa-comment"></i> 评论
                        </a>
                    </div>
                </div>
            </c:forEach>
            
            <!-- 好友动态 -->
            <c:forEach items="${friendLogs}" var="log" varStatus="status">
                <div class="bg-white rounded-lg shadow-card p-4 mb-4 animate-fade-in" style="animation-delay: ${status.index * 0.1}s">
                    <div class="flex items-center gap-3">
                        <img src="${log.user.avatar}" alt="${log.user.nickname}" class="w-10 h-10 rounded-full object-cover">
                        <div>
                            <h3 class="font-medium text-sm">${log.user.nickname}</h3>
                            <p class="text-xs text-info">${log.publishTime} · ${log.location}</p>
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <p class="text-sm">${log.content}</p>
                        
                        <c:if test="${not empty log.attachment}">
                            <div class="mt-2 rounded-lg overflow-hidden">
                                <img src="${log.attachment}" alt="Post Image" class="w-full h-auto object-cover">
                            </div>
                        </c:if>
                        
                        <c:if test="${not empty log.link}">
                            <div class="mt-2 bg-light rounded-lg p-2 flex items-center gap-2">
                                <i class="fa fa-link text-primary"></i>
                                <p class="text-xs text-info truncate">${log.link}</p>
                            </div>
                        </c:if>
                    </div>
                    
                    <div class="mt-3 flex items-center justify-between text-xs text-info">
                        <span class="flex items-center gap-1">
                            <i class="fa fa-eye"></i> ${log.views}
                        </span>
                        <span class="flex items-center gap-1">
                            <i class="fa fa-user-friends"></i> ${log.scope}
                        </span>
                    </div>
                    
                    <div class="mt-3 border-t border-gray-100 pt-3 flex justify-between">
                        <button class="px-3 py-1.5 rounded text-sm text-info hover:text-primary transition-colors">
                            <i class="fa fa-thumbs-up"></i> ${log.likes}
                        </button>
                        <button class="px-3 py-1.5 rounded text-sm text-info hover:text-primary transition-colors">
                            <i class="fa fa-thumbs-down"></i> ${log.dislikes}
                        </button>
                        <a href="commentLog.jsp?logId=${log.id}" class="px-3 py-1.5 rounded text-sm text-info hover:text-primary transition-colors">
                            <i class="fa fa-comment"></i> 评论
                        </a>
                    </div>
                </div>
            </c:forEach>
            
            <!-- 我的动态 -->
            <c:forEach items="${myLogs}" var="log" varStatus="status">
                <div class="bg-white rounded-lg shadow-card p-4 mb-4 animate-fade-in" style="animation-delay: ${status.index * 0.1}s">
                    <div class="flex items-center gap-3">
                        <img src="${log.user.avatar}" alt="${log.user.nickname}" class="w-10 h-10 rounded-full object-cover">
                        <div>
                            <h3 class="font-medium text-sm">${log.user.nickname} <span class="text-xs text-primary bg-primary/10 px-1.5 py-0 rounded-full">我</span></h3>
                            <p class="text-xs text-info">${log.publishTime} · ${log.location}</p>
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <p class="text-sm">${log.content}</p>
                        
                        <c:if test="${not empty log.attachment}">
                            <div class="mt-2 rounded-lg overflow-hidden">
                                <img src="${log.attachment}" alt="Post Image" class="w-full h-auto object-cover">
                            </div>
                        </c:if>
                        
                        <c:if test="${not empty log.link}">
                            <div class="mt-2 bg-light rounded-lg p-2 flex items-center gap-2">
                                <i class="fa fa-link text-primary"></i>
                                <p class="text-xs text-info truncate">${log.link}</p>
                            </div>
                        </c:if>
                    </div>
                    
                    <div class="mt-3 flex items-center justify-between text-xs text-info">
                        <span class="flex items-center gap-1">
                            <i class="fa fa-eye"></i> ${log.views}
                        </span>
                        <span class="flex items-center gap-1">
                            <i class="fa fa-user"></i> ${log.scope}
                        </span>
                    </div>
                    
                    <div class="mt-3 border-t border-gray-100 pt-3 flex justify-between">
                        <button class="px-3 py-1.5 rounded text-sm text-info hover:text-primary transition-colors">
                            <i class="fa fa-thumbs-up"></i> ${log.likes}
                        </button>
                        <button class="px-3 py-1.5 rounded text-sm text-info hover:text-primary transition-colors">
                            <i class="fa fa-thumbs-down"></i> ${log.dislikes}
                        </button>
                        <a href="commentLog.jsp?logId=${log.id}" class="px-3 py-1.5 rounded text-sm text-info hover:text-primary transition-colors">
                            <i class="fa fa-comment"></i> 评论
                        </a>
                    </div>
                </div>
            </c:forEach>
        </div>
    </main>

    <!-- 底部导航（移动端） -->
    <nav class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-[0_-2px_10px_rgba(0,0,0,0.05)] py-2 z-10">
        <div class="grid grid-cols-4 text-center">
            <a href="#" class="text-primary">
                <i class="fa fa-home"></i>
                <p class="text-xs mt-1">社交圈</p>
            </a>
            <a href="#" class="text-info hover:text-primary transition-colors">
                <i class="fa fa-user"></i>
                <p class="text-xs mt-1">我的</p>
            </a>
            <a href="#" class="text-info hover:text-primary transition-colors">
                <i class="fa fa-bell"></i>
                <p class="text-xs mt-1">通知</p>
            </a>
            <a href="#" class="text-info hover:text-primary transition-colors">
                <i class="fa fa-cog"></i>
                <p class="text-xs mt-1">设置</p>
            </a>
        </div>
    </nav>

    <script>
        // 点赞功能模拟
        document.querySelectorAll('.fa-thumbs-up').forEach(icon => {
            icon.parentElement.addEventListener('click', function() {
                const count = this.querySelector('span');
                if (this.classList.contains('text-primary')) {
                    this.classList.remove('text-primary');
                    count.textContent = parseInt(count.textContent) - 1;
                } else {
                    this.classList.add('text-primary');
                    count.textContent = parseInt(count.textContent) + 1;
                }
            });
        });
        
        // 踩功能模拟
        document.querySelectorAll('.fa-thumbs-down').forEach(icon => {
            icon.parentElement.addEventListener('click', function() {
                const count = this.querySelector('span');
                if (this.classList.contains('text-primary')) {
                    this.classList.remove('text-primary');
                    count.textContent = parseInt(count.textContent) - 1;
                } else {
                    this.classList.add('text-primary');
                    count.textContent = parseInt(count.textContent) + 1;
                }
            });
        });
    </script>
</body>
</html>